<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>IoT平台 - 用户面板</title>
  <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
  <div class="container">
    <h1>IoT平台用户面板</h1>
    
    <!-- 用户导航栏 -->
    <div class="navbar">
      <ul>
        <li><a href="#" class="nav-link active" data-page="user-dashboard">用户面板</a></li>
        <li><a href="#" class="nav-link" data-page="change-password-page">修改密码</a></li>
      </ul>
      <div class="user-info">
        <span>用户: <span id="user-name"></span> (<span id="user-role"></span>)</span>
        <button class="logout-btn" onclick="clearToken(); window.location.href='login.html';">退出登录</button>
      </div>
    </div>
    
    <!-- 用户仪表板 -->
    <div id="user-dashboard" class="page">
      <div class="card">
        <div class="card-header">
          <h2 class="card-title">我的信息</h2>
        </div>
        <button onclick="onMe()">刷新用户信息</button>
        <pre id="meResult"></pre>
      </div>
    </div>
    
    <!-- 修改密码页面 -->
    <div id="change-password-page" class="page hidden">
      <div class="card">
        <div class="card-header">
          <h2 class="card-title">修改密码</h2>
        </div>
        <form onsubmit="onChangePassword(event)">
          <div class="form-group">
            <label>用户名</label>
            <input name="username" required autocomplete="username" />
          </div>
          <div class="form-group">
            <label>旧密码</label>
            <input name="oldPassword" type="password" required autocomplete="current-password" />
          </div>
          <div class="form-group">
            <label>新密码</label>
            <input name="newPassword" type="password" required autocomplete="new-password" />
          </div>
          <button type="submit">修改密码</button>
        </form>
        <pre id="changePasswordResult"></pre>
      </div>
    </div>
  </div>

  <script src="js/utils.js"></script>
  <script src="js/user.js"></script>
  <script>
    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
      // 初始化调试面板
      initDebugPanel();
      
      // 检查是否有保存的token
      if (!loadToken()) {
        // 没有token，重定向到登录页面
        window.location.href = 'login.html';
        return;
      }
      
      // 获取用户信息
      request(api.me).then(resp => {
        if (resp.ok && resp.data && resp.data.success) {
          const user = resp.data.data;
          // 检查用户角色
          if (user.role === 'ADMIN') {
            // 管理员用户重定向到管理员面板
            window.location.href = 'admin-dashboard.html';
            return;
          }
          
          // 设置用户信息
          document.getElementById('user-name').textContent = user.name || user.username;
          document.getElementById('user-role').textContent = user.role;
          
          // 加载用户信息
          loadUserPage();
        } else {
          // Token无效，清除并重定向到登录页面
          clearToken();
          window.location.href = 'login.html';
        }
      }).catch(() => {
        // 请求失败，清除token并重定向到登录页面
        clearToken();
        window.location.href = 'login.html';
      });
      
      // 为导航链接添加事件监听器
      document.querySelectorAll('.nav-link').forEach(link => {
        link.addEventListener('click', function(e) {
          e.preventDefault();
          const page = this.getAttribute('data-page');
          navigateTo(page);
        });
      });
    });
  </script>
</body>
</html>